<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>


    /* 
        1 按顺序的调用 多个异步方法
          1 选择你的所在地 
            1 省份
            2 城市
            3 区
            4 街道 
    
        2 比如 城市选择页面 不一样
          1 只需要 最后一个请求回来了 在执行业务就可以了 
            1 假设  获取热门城市 花费 10秒钟
            2 假设  获取所所有城市 花费 20秒钟
            3 旧的代码 一共要花费 30秒钟 
          2 正常应该是花费 20秒钟 
            1 有一个问题 我们如何去找到 最后一个请求回来 ??
            2 解决1 使用原生js的方式来找一找 
            3 解决2 Promise.all 来显示 
    
     */


    function getList11111() {
      // ajaxTimes++;
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(1111);
        }, 2000);
      })
    }

    function getList22222() {
      // ajaxTimes++;
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(2222);
        }, 4000);
      })
    }

    //  调用 1 
    // async function init() {
    //   // 开启定时器 
    //   console.time("开始计时")
    //   const res1 = await getList11111();
    //   const res2 = await getList22222();
    //   console.log({ res1, res2 });
    //   console.timeEnd("开始计时")
    // }

    // init();

    // 调用 2  用原生的代码来实现 代码看起来 不优雅

    // let ajaxTimes = 0;
    // let obj = {};
    // function lastBack(newObj) {
    //   if (ajaxTimes === 0) {
    //     // 最后一个请求了
    //     obj = { ...obj, ...newObj };
    //     console.log(obj);
    //     console.timeEnd("开始计时");
    //   }
    // }
    // function init() {
    //   console.time("开始计时");
    //   getList11111()
    //     .then(res1 => {
    //       ajaxTimes--;
    //       obj.res1 = res1;
    //       lastBack(obj);
    //     });
    //   getList22222()
    //     .then(res2 => {
    //       ajaxTimes--;
    //       obj.res2 = res2;
    //       lastBack(obj);
    //     });
    // }

    // init();

    // 调用方式 2 使用promise.all 方法来实现
    // 表示 all 可以接收多个参数=> 多个需要同时发送出去的异步请求
    // all 的返回值也是一个promise对象  all().then() 
    // all().then() 触发时机是 多个请求里面 所有的请求都回来了  .then 就触发 


    // console.time("计时");
    // Promise.all([getList11111(), getList22222()])
    //   .then(arr => {
    //     // arr[0] 等于  getList11111 里面返回值
    //     console.log(arr);
    //     console.timeEnd("计时")
    //   }) 


    // 补充 promise.race 也可以接收多个同时发送出去的异步请求 
    // 但是  有一个先回来了  就直接触发 race().then 

    console.time("计时");
    Promise.race([getList11111(), getList22222()])
      .then(res => {
        console.log(res);
        console.timeEnd("计时")
      }) 
  </script>
</body>

</html>